<template>
  <el-card>
    <template #header>
      <div>pollingInterval【useRequest】</div>
    </template>
    Username：
    <span>{{ loading ? "loading" : data }}</span>
    <br />
    <p>PollingInterval：{{ computedTime }}ms</p>
    <div style="margin-right: 8px">
      <el-button @click="start()">Start</el-button>
      <el-button @click="update()" style="margin-left: 8px">
        time + 100ms
      </el-button>
      <el-button @click="cancel()" style="margin-left: 8px">Stop</el-button>
    </div>
  </el-card>
</template>

<script setup>
  import { computed, ref } from "vue";
  import { useRequest } from "vue-hooks-plus";

  function getUsername() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(String(Date.now()));
      }, 1000);
    });
  }

  const time = ref(900);

  const computedTime = computed(() => time.value + 100);

  const { data, run, loading, cancel } = useRequest(() => getUsername(), {
    manual: true,
    pollingInterval: computedTime,
    pollingWhenHidden: false,
  });

  const start = () => {
    run();
  };

  const update = () => {
    time.value += 100;
  };
</script>
